<template>
    <div class="eventsInfo">

        <div class="content">
            <div class="title">
                赛事信息
            </div>
            <div class="content-info">
                <div class="left" :data-aos="'fade-right'">
                    <div class="left-title">
                        最近赛事
                    </div>
                    <div class="contrast-tem">
                        <div class="left-tem-info">
                            <span>东莞莞联</span>
                            <img src="https://q9.itc.cn/q_70/images03/20241104/92979a896f064504b52c312838e87c97.jpeg"
                                alt="">
                        </div>
                        <div class="contrast">
                            VS
                        </div>
                        <div class="right-tem-info">
                            <img src="https://q9.itc.cn/q_70/images03/20241104/92979a896f064504b52c312838e87c97.jpeg"
                                alt="">
                            <span>昆明郑和船工</span>
                        </div>
                    </div>

                    <!-- 比赛时间 -->
                    <div class="game-time">
                        <div class="time">
                            <svg-icon name="calendar-time" class="svg-style"></svg-icon>
                            <span>
                                2025年5月31日 18：05
                            </span>
                        </div>
                        <div class="address">
                            <svg-icon name="location" class="svg-style"></svg-icon>
                            <span>
                                专家体育场
                            </span>
                        </div>
                    </div>
                    <!-- 比赛列表 -->
                    <div class="race-list">
                        <div class="race-item" v-for="i in 2" :key="i">
                            <div class="race-left">
                                <img class="race-logo"
                                    src="https://q9.itc.cn/q_70/images03/20241104/92979a896f064504b52c312838e87c97.jpeg"
                                    alt="logo">
                                <span class="race-team">昆明郑和船工</span>
                            </div>
                            <div class="race-vs">VS</div>
                            <div class="race-right">
                                <img class="race-logo"
                                    src="https://q9.itc.cn/q_70/images03/20241104/92979a896f064504b52c312838e87c97.jpeg"
                                    alt="logo">
                                <span class="race-team">东莞莞联</span>
                            </div>
                            <div class="race-info">
                                <span class="race-time">2025年5月13日 18:05</span>
                                <span class="race-place">| 专家体育场</span>
                            </div>
                        </div>
                    </div>

                    <div class="look-more">
                        查看更多
                    </div>
                </div>
                <div class="right" :data-aos="'fade-left'">
                    <div class="right-title">最新结果</div>
                    <div class="result-list">
                        <div class="result-item" v-for="i in 4" :key="i">
                            <div class="team-info">
                                <img class="team-logo"
                                    src="https://q9.itc.cn/q_70/images03/20241104/92979a896f064504b52c312838e87c97.jpeg"
                                    alt="主队logo">
                                <span class="team-name">内蒙古草上飞</span>
                            </div>


                            <span class="score">
                                <span class="score-main">
                                    92
                                </span>
                                –
                                <span class="score-sub">
                                    84
                                </span>
                            </span>


                            <div class="team-info">
                                <img class="team-logo"
                                    src="https://q9.itc.cn/q_70/images03/20241104/92979a896f064504b52c312838e87c97.jpeg"
                                    alt="客队logo">
                                <span class="team-name">广西苹果哈聊</span>
                            </div>
                            <div class="result-info">
                                <span class="result-time">2025年5月13日 18:05</span>
                                <span class="partition">
                                    |
                                </span>
                                <span class="result-place"> 专家体育场</span>
                            </div>
                        </div>
                    </div>
                    <div class="look-more-result">查看更多结果</div>
                </div>
            </div>


        </div>
    </div>
</template>


<style lang="less" scoped>
.eventsInfo {
    width: 100%;
    background-image: url('~/assets/web/events.png'); // 替换为你的图片路径
    background-size: cover;
    background-position: top right; // 改为右上角固定
    background-repeat: no-repeat;

    .content {
        width: 100%;
        padding: 137px 110px;
        box-sizing: border-box;

        .title {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 40px;
            color: #ffffff;
            text-align: left;
            position: relative;
            padding-left: 27px;
            line-height: 50px;
            box-sizing: border-box;
        }

        .title::after {
            content: ' ';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 50px;
            background: var(--theme-gradient-bg);
        }

        .content-info {
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .left {
                flex: 0 0 63%;
                margin-right: 20px;
                background-color: #ffffff;
                padding-top: 30px;

                .left-title {
                    width: 100%;
                    text-align: center;
                    font-family: PingFang HK, PingFang HK;
                    font-weight: 500;
                    font-size: 22px;
                    color: #1E2021;
                    font-style: normal;
                    text-transform: none;
                }

                .contrast-tem {
                    width: 100%;
                    margin-top: 37px;
                    display: flex;
                    justify-content: center;


                    .left-tem-info {
                        flex: 0 0 46%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;

                        span {
                            font-family: PingFang HK, PingFang HK;
                            font-weight: 500;
                            font-size: 24px;
                            color: #1E2021;
                            font-style: normal;
                            text-transform: none;
                        }

                        img {
                            margin-left: 27px;
                            width: 76px;
                        }
                    }

                    .right-tem-info {
                        flex: 0 0 46%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;

                        span {
                            font-family: PingFang HK, PingFang HK;
                            font-weight: 500;
                            font-size: 24px;
                            color: #1E2021;
                            font-style: normal;
                            text-transform: none;
                        }

                        img {
                            margin-left: 27px;
                            width: 76px;
                        }
                    }

                    .contrast {
                        flex: 0 0 8%;
                        font-family: PingFang HK, PingFang HK;
                        font-weight: 500;
                        font-size: 60px;
                        color: #EC4613;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                        margin: 0 26px;
                    }
                }

                .game-time {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 50px;

                    .svg-style {
                        font-size: 20px;
                    }

                    .time {
                        width: 50%;
                        margin-right: 76px;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;

                        span {
                            font-family: PingFang HK, PingFang HK;
                            font-weight: 400;
                            font-size: 18px;
                            color: #656C7E;
                            font-style: normal;
                            text-transform: none;
                            margin-left: 16px;
                        }
                    }

                    .address {
                        width: 50%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        span {
                            font-family: PingFang HK, PingFang HK;
                            font-weight: 400;
                            font-size: 18px;
                            color: #656C7E;
                            font-style: normal;
                            text-transform: none;
                            margin-left: 16px;
                        }
                    }
                }

                .race-list {
                    margin-top: 30px;

                    .race-item {
                        display: flex;
                        align-items: center;
                        padding: 12px 20px;
                        margin-bottom: 12px;
                        position: relative;
                        border-top: 1px solid #66656A;
                    }

                    .race-left,
                    .race-right {
                        display: flex;
                        align-items: center;
                    }

                    .race-logo {
                        width: 48px;
                        height: 48px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }

                    .race-team {
                        font-family: PingFang HK, PingFang HK;
                        font-weight: 400;
                        font-size: 16px;
                        color: #1E2021;
                        font-style: normal;
                        text-transform: none;
                    }

                    .race-vs {
                        font-family: PingFang HK, PingFang HK;
                        font-weight: 600;
                        font-size: 26px;
                        color: #EC4613;
                        font-style: normal;
                        text-transform: none;
                        margin: 0 16px;
                    }

                    .race-info {
                        margin-left: auto;
                        display: flex;
                        align-items: center;
                        font-family: PingFang HK, PingFang HK;
                        font-weight: 400;
                        font-size: 16px;
                        color: #656C7E;

                        .race-time {
                            margin-right: 8px;
                        }
                    }
                }

                .look-more {
                    padding: 20px 0;
                    box-sizing: border-box;
                    background: #072430;
                    border-radius: 0px 0px 0px 0px;
                    font-family: PingFang HK, PingFang HK;
                    font-weight: 400;
                    font-size: 18px;
                    text-align: center;
                    cursor: pointer;
                    color: var(--el-color-primary);
                }
            }

            .right {
                flex: 1;
                background-color: #ffffff;

                .right-title {
                    padding: 24px;
                    box-sizing: border-box;
                    background-color: #E7E7E7;
                    font-family: PingFang HK, PingFang HK;
                    font-weight: 500;
                    font-size: 20px;
                    color: #1E2021;
                }

                .result-list {
                    .result-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-bottom: 1px solid #E5E5E5;
                        padding: 16px 0;
                        box-sizing: border-box;
                        position: relative;
                        flex-wrap: wrap;
                    }

                    .team-info {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;

                        .team-logo {
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            margin-right: 8px;
                        }

                        .team-name {
                            font-size: 16px;
                            color: #1E2021;
                        }
                    }

                    .score {
                        font-family: Reeji-CloudZongYi-GB, Reeji-CloudZongYi-GB;
                        font-weight: 400;
                        font-size: 20px;
                        color: #EC4613;
                        text-align: center;
                        margin: 0 10px;
                    }

                    .result-info {
                        font-family: PingFang HK, PingFang HK;
                        font-weight: 400;
                        font-size: 13px;
                        color: #656C7E;
                        text-align: center;
                        margin-top: 30px;

                        .partition {
                            margin: 0 8px;
                        }
                    }
                }

                .look-more-result {
                    padding: 22px 0;
                    box-sizing: border-box;
                    color: var(--el-color-primary);
                    font-family: PingFang HK, PingFang HK;
                    font-weight: 400;
                    text-align: center;
                    font-size: 18px;
                    cursor: pointer;
                }
            }
        }



    }
}
</style>